<template>
  <div class="leave-management">
    <el-tabs type="border-card">
      <el-tab-pane label="申请列表">
        <div class="search">
          <el-input v-model="queryInfo.name" placeholder="申请人姓名" clearable @input="getLeaveList"></el-input>

          <el-date-picker v-model="queryInfo.date_time" type="date" placeholder="选择日期">
          </el-date-picker>
          <el-button type="primary" @click="getLeaveList()">查询</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column type="index" :index="1 + (queryInfo.page - 1) * queryInfo.size" label="编号" width="60">
          </el-table-column>
          <el-table-column prop="nickname" label="申请人" width="80"></el-table-column>
          <el-table-column prop="begin_time" label="开始时间"> </el-table-column>
          <el-table-column prop="end_time" label="结束时间"> </el-table-column>
          <el-table-column prop="vacation_type" label="请假类型" width="100">
            <template slot-scope="scope">
              {{ leaveType[scope.row.vacation_type] }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="请假事由" width="160">
            <template slot-scope="scope">
              {{ scope.row.remark?scope.row.remark:'暂无' }}
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="160">
            <template slot-scope="scope">
              <el-tag disable-transitions :type="scope.row.status==2?'success':scope.row.status==1?'warning':'danger'">{{ statusType[scope.row.status] }}</el-tag>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="create_time" label="申请时间">
          </el-table-column> -->
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" @click="askLeave(scope.row.id,true)">同意</el-button>
              <el-button size="mini" type="danger" @click="askLeave(scope.row.id,false)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum" :page-sizes="[10,20,30,50]" :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史审批">
        <div class="search">
          <el-input v-model="historyQueryInfo.name" placeholder="申请人姓名" clearable @input="getLeaveList"></el-input>
          <el-date-picker v-model="historyQueryInfo.date_time" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <el-table :data="historyTableData" style="width: 100%">
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column type="index" :index="1 + (queryInfo.page - 1) * queryInfo.size" label="编号" width="60">
          </el-table-column>
          <el-table-column prop="nickname" label="申请人" width="80"></el-table-column>
          <el-table-column prop="begin_time" label="开始时间"> </el-table-column>
          <el-table-column prop="end_time" label="结束时间"> </el-table-column>
          <el-table-column prop="vacation_type" label="请假类型" width="100">
            <template slot-scope="scope">
              <el-tag disable-transitions>{{ leaveType[scope.row.vacation_type] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="请假事由" width="160">
          </el-table-column>
          <el-table-column prop="status" label="审批结果" width="160">
            <template slot-scope="scope">
              {{ statusType[scope.row.status] }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.page" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.size"
            layout="total, sizes, prev, pager, next, jumper" :total="historyTotal">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getAuditList,getAuditHistoryList,askAudit,getStatusType,getAuditType } from "@/api/leave";

import dayjs from "dayjs";
export default {
  data() {
    return {
      //查询信息实体
      queryInfo: {
        name: "",
        page: 1, //当前页
        size: 10, //每页最大数
      },
      historyQueryInfo: {
        name: "",
        page: 1, //当前页
        size: 10, //每页最大数
      },

      total: 10,
      user: {
        avatar: "",
      },
      tableData: [],
      historyTableData:[],
      historyTotal:0,
      leaveType: {},
      statusType:{}
    };
  },
  methods: {
    getLeaveList() {
      let params = {...this.queryInfo,status:'1'}
      if(this.queryInfo.date_time){
        params = {...this.queryInfo,date_time:dayjs(this.queryInfo.date_time).format('YYYY-MM-DD')}
      }
      getAuditList(params).then(res=>{
        this.total = res.total;
        this.tableData = res.data;
      })
    },
    getHistoryLeave(){
      let params = {...this.historyQueryInfo,status:'2,3'}
      if(this.historyQueryInfo.date_time){
        params = {...this.historyQueryInfo,date_time:dayjs(this.historyQueryInfo.date_time).format('YYYY-MM-DD')}
      }
      getAuditList(params).then(res=>{
        this.historyTotal = res.total;
        this.historyTableData = res.data;
      })
    },
    //最大数
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getLeaveList();
    },
    //pageNum的触发动作
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getLeaveList();
    },
    filterLeaveType(value,row) {
      return row.leave_type === value;
    },
    filterResult(value,row) {
      return row.result === value;
    },
    askLeave(id,result){
      const params = {
        audit_res: result?2:3,
        id_list:[id]
      }
      askAudit(params).then((res)=>{
        this.getLeaveList();
        this.getHistoryLeave()
      })
    }
  },
  created() {
    this.getLeaveList();
    this.getHistoryLeave();
    getAuditType().then(res=>{
      this.leaveType = res;
    })
      getStatusType().then((res)=>{
        this.statusType = res
        console.log('StatusType',this.statusType)
      })
  }
};
</script>

<style lang="less" scoped>
.leave-management {
  margin: 0 16px;

  .pagination {
    width: 400px;
    margin: 10px auto;
  }

  .search {
    .el-input {
      width: 150px;
      margin-right: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>
